<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>四月的谎言</title>
    <style>
        .bk {
            width: 400px;
            height: 400px;
            font-weight: bold;
            margin: 0 auto;
        }
        .current
        {
            background-color: #c60;
        }
        button {
            width: 100px;
            height: 50px;
        }

        .bk img {
            width: 400px;
            height: 300px;
        }

        .hide {
            display: none;
        }

        .show {
            width: 400px;
            display: block;
        }

        #first {
            display: block;
            width: 400px;
        }
    </style>
</head>

<body>
    <div class="bk">
        <button>1</button><button>2</button><button>3</button><button>4</button>
        <div class="bkw">
            <img src="banner/april-15.jpg" class="hide" alt="">
            <img src="banner/april-12.jpg" class="hide" alt="">
            <img src="banner/april-11.jpg" class="hide" alt="">
            <img src="banner/april-14.jpg" class="hide" alt="">
        </div>
    </div>
    <script>
        let button = document.getElementsByTagName("button")
        let img = document.getElementsByTagName("img")
        
        for (let i = 0; i < button.length; i++) {
            button[i].onmouseover = function () {
                for (let j = 0; j < button.length; j++) {
                    img[j].className = "hide"
                    this.className=""
                }
                img[this.index].className = "show"
                this.className="current"
            } 
            button[i].index=i
            button[i].onmouseout = function () {
                img[this.index].className = "hide"
                this.className=""
            }
        }
    </script>
</body>

</html>